<template>
  <view class="spec-selector">
    <view class="section-title">
      <text>选择规格</text>
      <text class="selected-spec">{{selectedSpec}}</text>
    </view>
    
    <view class="spec-list">
      <view class="spec-item" v-for="(spec, index) in specs" :key="index">
        <text class="spec-name">{{spec.name}}</text>
        <view class="spec-values">
          <text 
            class="spec-value"
            v-for="(value, valueIndex) in spec.values"
            :key="valueIndex"
            :class="{
              selected: spec.selected === valueIndex,
              disabled: isSpecDisabled(index, valueIndex)
            }"
            @click="selectSpec(index, valueIndex)"
          >
            {{value}}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  specs: {
    type: Array,
    default: () => []
  },
  selectedSpec: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['change'])

// 检查规格是否可选（实际项目中可能根据库存等情况判断）
const isSpecDisabled = (specIndex, valueIndex) => {
  return false
}

const selectSpec = (specIndex, valueIndex) => {
  if (!isSpecDisabled(specIndex, valueIndex)) {
    emit('change', specIndex, valueIndex)
  }
}
</script>

<style lang="scss">
.spec-selector {
  margin-top: 20rpx;
  background-color: $white-bg;;
  padding: 30rpx;
  
  .section-title {
    display: flex;
    justify-content: space-between;
    font-size: $font-size-30rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
    
    .selected-spec {
      font-weight: normal;
      color: $primary-color;
    }
  }
  
  .spec-item {
    margin-bottom: 30rpx;
    
    .spec-name {
      display: block;
      font-size: $font-size-28rpx;
      margin-bottom: 20rpx;
    }
    
    .spec-values {
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx;
      
      .spec-value {
        padding: 10rpx 30rpx;
        border: 1rpx solid #ddd;
        border-radius: 8rpx;
        font-size: 26rpx;
        
        &.selected {
          border-color: $primary-color;
          color: $primary-color;
          background-color: rgba($primary-color, 0.1);
        }
        
        &.disabled {
          color: #ccc;
          border-color: #eee;
          background-color: #f9f9f9;
        }
      }
    }
  }
}
</style>